import { useEffect, useMemo, useState } from "react";
import { ThemeProvider } from "@supcon/supcon-5t-design";
import {
  useModel,
  qiankunStateFromMasterModelNamespace,
} from "@supcon/supcon-microapp";
import { AuthProvider } from "@supcon/supcon-5t-auth";
import { setLocale, getLocale } from "@/i18next/method";
import { __getRootElement } from "@/renderer";
import { GlobalProvider } from "@/models/global";
import zh_CN from "@supcon/supcon-5t-design/dist/es/components/locale/zh_CN";
import en_US from "@supcon/supcon-5t-design/dist/es/components/locale/en_US";

const Layout: React.FC = ({ children }: any) => {
  const [language, setLanguage] = useState<string>(getLocale() || "zh-CN");
  const salveModel: any = useModel(qiankunStateFromMasterModelNamespace);
  //   const { theme } = useMemo(() => {
  //     let theme: DesignThemeMode = "darkBlue";
  //     if (salveModel && salveModel.theme) {
  //       theme = salveModel.theme;
  //     }
  //     return { theme };
  //   }, [salveModel]);
  const antdLocale = useMemo(() => {
    if (language === "zh-CN") {
      return zh_CN;
    } else if (language === "en-US") {
      return en_US;
    } else {
      return zh_CN;
    }
  }, [language]);
  useEffect(() => {
    if (salveModel && salveModel.language) {
      setLanguage(salveModel.language);
      setLocale(salveModel.language);
    }
  }, [salveModel]);
  return (
    <GlobalProvider
      value={{
        language,
      }}
    >
      <ThemeProvider
        // themeMode={theme}
        themeMode="darkBlue"
        container={__getRootElement().parentElement}
        locale={antdLocale}
      >
        <AuthProvider useModel={useModel}>{children}</AuthProvider>
      </ThemeProvider>
    </GlobalProvider>
  );
};
export default Layout;
